<template>
	<view class="detail_block">
		<view class="top_block">
			<text>计划内容</text>
		</view>
		<view class="details">
			<uni-list>
				<uni-list-item title="周期" :note="`${arr.cycle}`"></uni-list-item>
				<uni-list-item title="爱好" :note="hobby">
					<text></text>
				</uni-list-item>
				<uni-list-item title="洲" :note="arr.zhou"></uni-list-item>
				<uni-list-item title="国家" :note="arr.country"></uni-list-item>
				<uni-list-item title="城市" :note="city">
				</uni-list-item>
				<uni-list-item title="预算" :note="`${arr.money}`"></uni-list-item>
				<uni-list-item title="出发日期" :note="arr.startDate"></uni-list-item>
				<uni-list-item title="出发城市" :note="arr.startCity"></uni-list-item>
			</uni-list>
			<button size="mini" style="margin-top: 32rpx;background: lightgrey;" @click="del(index)">
				删除
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr: [],
				index: "",
				hobbyList: [{
						text: "风光休闲",
						value: 0,
				 },
					{
						text: "蜜月旅行",
						value: 1,
					},
					{
						text: "光影拍摄",
						value: 2,
					},
					{
				 	text: "购物享受",
						value: 3,
					},
					{
						text: "亲子度假",
						value: 4,
					},
					{
						text: "美食盛宴",
						value: 5,
					},
					{
						text: "人文历史",
						value: 6,
					},
					{
						text: "旅拍婚纱",
						value: 7,
					},
				],
				hobby: "",
				city: ""
			};
		},
		onLoad(option) {
			console.log(JSON.parse(option.details));
			console.log(option.dataIndex);
			this.arr = JSON.parse(option.details);
			this.getCity();
			this.index = option.dataIndex;
			this.hobby = this.arr.hobby.map(it => {
				return this.hobbyList.find(item => {
					if (it === item.value) {
						return item
					}
				}).text
			}).join(",")
			console.log(this.hobby)
		},
		methods: {
			del(index) {
				uni.showModal({
					title: "提示",
					content: "确定要删除吗？",
					success: (res) => {
						if (res.confirm) {
							this.$store.commit("delPlan", index);
							uni.navigateBack({
								delta: 1
							});
						} else if (res.cancel) {
							console.log("用户点击取消");
						}
					},
				});
			},
			// 判断城市是否空，是空则为true填无，反之
			getCity() {
				console.log(!this.arr.city)
				if (!this.arr.city) {
					this.city = "无"
					console.log(this.city)
				} else {
					this.city = this.arr.city
				}
			}
		},
	};
</script>

<style scoped>
	.detail_block {
		width: 100%;
		min-height: 1200rpx;
		box-sizing: border-box;
	}

	.top_block {
		width: 100%;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		background-color: #428bca;
		color: #ffffff;
	}

	.details {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
	}
</style>
